import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {Modal, Form, Row, Col, Input, Button} from 'antd';
import {ModalForm, ListBox} from '../../../components'
import {fetchData} from '../../../components/AjaxConsumer'
import store from '../../../stores'
const confirm = Modal.confirm;


export default class Info extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            resData: null,
            conditonData:{},
        };
        //行操作列表
        this.rowOperation = [
        ];
        //header 操作列表
        this.headerOperation = [
            {
                handleName: 'export',
                showName: 'Excel',
                iconClass: 'file-excel'
            }
        ];
        //table列表展示列配置
        //storageKey 本地存储的key
        //showName、columnName 必有属性， columnWidth 可选，默认100, columnHidden: true 列隐藏（用于列配置显示隐藏）, foreverHidden: true 列永久隐藏
        this.tableColumn = {
            storageKey: 'dbOutSnId',
            data: [
                // {
                //     showName: 'id',
                //     columnName: 'userId',
                //     columnHidden:true,
                //     foreverHidden: true
                // },
                {
                    showName: '唯一标识',
                    columnName: 'dbOutSnId',
                    columnHidden: true,
                    foreverHidden: true
                },{
                    showName: '出库单号',
                    columnName: 'proOutCode'
                },{
                    showName: '物料号',
                    columnName: 'materialCode'
                },{
                    showName: '物料描述',
                    columnName: 'materialDesc'
                },{
                    showName: '条码',
                    columnName: 'proBarcode'
                },{
                    showName: '扫描时间',
                    columnName: 'scanTime'
                },{
                    showName: '出库库位',
                    columnName: 'wlCode'
                },{
                    showName: '扫描人ID',
                    columnName: 'scanedBy'
                }
            ]
        };

        this.searchComponentData = [
        ];
        this.formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    rowHandles = (strHandles, rowObj) => {
        //listBox组件内未做函数不存在的判断，需定义空函数
        if (strHandles == 'export') {
            this.exportXlsHandle(this.state.conditonData);
        }
    };
    //(外部调用)
    editHandle = (rowObj) => {
        //根据对象的Id 属性获取对象信息
        let proDbOutId = rowObj.proDbOutId;
        let materialCode = rowObj.materialCode;
        
        this.setState({
            url: '/wmsrest/product/odsprodbout/snlist?proDbOutId=' + proDbOutId+'&materialCode='+materialCode+'&',
            visible: true
        });
        this.setState({
            conditonData:{
                'proDbOutId':proDbOutId
            }
        },()=>{
            console.log(this.state.conditonData)
        });
    };

    handleOk = () => {
        this.hideModal();
    };
    handleCancel = () => {
        this.hideModal();
    };

    exportXlsHandle =(conditonData) =>{
        console.log('-------导出条件--------',conditonData); 
        let param ='?'
        for(let key in conditonData){
            if(conditonData[key]!=''){
                console.log(key,conditonData[key]);
                param = param + key + '=' + conditonData[key] + '&'
            }
        }
        console.log(param);
        window.location.href='/wmsrest/product/odsprodbout/snlist/exp'+param;
    }
    render() {
        let isHideLeft = this.props.isHideLeft;
        return(
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title={'调拨出库详情'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'1200px'}
                key={Math.random()}
                footer={[
                    <Button key="back" type='primary' size="large" onClick={this.handleCancel}>返回</Button>,
                ]}
            >
                <ListBox
                    ref = 'info'
                    isHideLeft={isHideLeft}
                    tableColumnData = {this.tableColumn}
                    searchComponentData={this.searchComponentData}
                    url = {this.state.url}
                    rowHandles = {this.rowHandles}
                    rowOperation = {this.rowOperation}
                    headerOperation = {this.headerOperation}
                    isRowSingle={true}
                />

            </Modal>
        )
    }
}